<template>
	<view class="ct">
		<view class="inputWrap bgw pd30">
			<view class="input">
				<view class="inputLeft">
					<view class="title">药材名称<text class="red">*</text></view>
					<bjx-inputs item-key="value" placeholder='请输入内容' @list="getData" @select='select' overflow="hide"></bjx-inputs>
				</view>
			</view>
			<view class="uniBtn navs">
				<view>共<text style="color: #F86C53 ;">{{list.length}}味</text>药材</view>
				<view class="daoru" @click="daoru">处方导入</view>
			</view>
			<view class="boxes">
				<view class="uniBtn">
					<view class="box1">药名</view>
					<view class="box2">数量</view>
					<view class="box2">用法</view>
					<view class="box3">操作</view>
				</view>
				<view class="uniBtn alls" v-for="(item,index) in list" :key="index">
					<view class="box1" style="font-weight: bold;">{{item.value}}</view>
					<view class="box2 uniCenter">
						<input style="width: 120upx;" v-model="item.num" type="number" placeholder="请输入" placeholder-class="pcs" />
						<text>{{item.danwei}}</text>
					</view>
					<view class="box2">
						<picker @change="bindPickerChange($event,index)" :value="index" :range="array" range-key="title">
							<view v-if="!item.yongfaId">请选择</view>
							<view v-else>{{item.yongfaName}}</view>
						</picker>
					</view>
					<view class="box3" @click="del(index)">
						<img src="../../static/bg/del.png" alt="">
					</view>
				</view>
			</view>
		</view>
		
		<view class="btnStyle" @click="submit">添加完成</view>
		<view style="height: 50upx;"></view>
	</view>
</template>

<script>
	import {
		getlist,get_yaopin
	} from '../../request/api.js'
	import BjxInputs from '@/components/bjx-inputs/bjx-inputs.vue'
	export default {
		components: {
			BjxInputs
		},
		data() {
			return {
				value: '',
				data: [
					// {id: 1,value: '这是默认值2',danwei:'g'},
					// {id: 2,value: '数组中嵌套json格式数据',danwei:'g'},
					// {id: 3,value: '这种格式比较常用',danwei:'g'},
					// {id: 4,value: '只需在组件中设定',danwei:'g'},
					// {id: 5,value: '单行文本超出省略',danwei:'g'},
					// {id: 6,value: '这是6',danwei:'g'},
					// {id: 7,value: '这是7',danwei:'g'},
					// {id: 8,value: '这是8',danwei:'g'},
					// {id: 9,value: '这是9',danwei:'g'},
					// {id: 10,value: '这是10',danwei:'g'}
				],
				array: [
					// {id:'a',title:'先煎'},
					// {id:'b',title:'后下'},
					// {id:'c',title:'烊化'},
				],
				index: -1,
				
				arrayId1:'',//rp id
				arrayName1:'',//rp 名称
				list:[],
			}
		},
		onLoad(options) {
			let items = uni.getStorageSync('drugs')
			if(items){
				this.list = items
			}
			getlist({pid:'104'}).then(res=>{
				this.array = res.data
			})
			get_yaopin({cid:uni.getStorageSync('companyId')}).then(res=>{
				this.data = res.data.map(function(item) {
				    return {
				        id: item.id,
				        danwei: item.danwei,
				        value: item.name,
						yongfaId:'',
						yongfaName:'',
						num:''
				    }
				});
			})
		},
		methods: {
			// 远程加载数据 返回一个对象，{value: 输入框值, callback: 回调函数}
			getData(e) {
				this.value = e.value
				if (!e.value) {
					e.callback(this.data)
				} else {
					let data = []
					this.data.forEach(item => {
						if (item.value.indexOf(e.value) > -1) {
							data.push(item)
						}
					})
					e.callback(data)
				}
			},
			select(value) {
				// console.log(value)
				if(this.list.indexOf(value)===-1){
					this.list.push(value)
				    // console.log("指定元素不在数组中"+JSON.stringify(this.list));
				}else{
					console.log('已经有了')
				}
			},
			del(index){
				this.list.splice(index, 1);
			},
			// 处方导入
			daoru(){
				uni.navigateTo({
					url:'/pages/prescription/prescription'
				})
			},
			// 选择用法
			bindPickerChange(e,index) {
				this.index = e.target.value
				this.list[index].yongfaId = this.array[e.target.value].id
				this.list[index].yongfaName = this.array[e.target.value].title
			},
			
			submit(){
				if(this.list.length == 0){
					uni.showToast({
						title:'请输入药品',
						icon:'none'
					})
					return
				}
				for(let i=0;i<this.list.length;i++){
					if(!this.list[i].num){
						uni.showToast({
							title:'请完整输入药品数量',
							icon:'none'
						})
						return
					}
				}
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 前一个页面
				this.$nextTick(() => {
					if (beforePage.route == 'pages/meet/meet') {
						beforePage.$vm.datas = this.list//替换上个页面参数
						if(this.arrayId1){
							beforePage.$vm.arrayId1 = this.arrayId1//替换上个页面参数
							beforePage.$vm.arrayName1 = this.arrayName1//替换上个页面参数
						}
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ct{
		.inputWrap {
			margin-bottom: 150upx;
			.input {
				height: 96upx;
				// border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.inputLeft {
					display: flex;
					align-items: center;
					font-size: 32upx;
					
					.title {
						width: 145upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 40px;
						color: #414141;
						margin-right: 40upx;
						text-align: right;
					}
					
					.pickerInput {
						font-size: 28upx;
						line-height: 96upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					input{
						width: 500upx;
					}
					picker{
						width: 250upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		
			// .input:last-of-type {
			// 	border: none;
			// }
			.navs{
				margin:45upx 0upx;
				.daoru{
					color: #6D91DD;
					background: #EBF1FF;
					padding: 10upx 30upx;
					border-radius: 40upx;
				}
			}
			.boxes{
				text-align: center;
				font-size: 28upx;
				
				.uniBtn{
					padding: 20upx 0;
					.box1{
						width: 26%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.box2{
						width: 27%;
					}
					.box3{
						width: 20%;
						
						img{
							width: 40upx;
							height: 40upx;
						}
					}
				}
				
				.uniBtn:nth-child(odd) {
					background: #FAF7FA;
				}
			}
		}
		.submit{
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #9F9F9F;
			padding: 36upx;
			color: #6996FE;
			margin-bottom: 36upx;
		}
		
	}
	
</style>

